<script setup lang="ts">
import type { LessonInfo } from '../type'
import Dialog from '@/components/Dialog/index.vue'
import { computed, ref } from 'vue'

const emit = defineEmits(['startLesson'])

const dialogRef = ref()
const lessonInfo = ref<LessonInfo>({
  studentName: '张三',
  lessonTime: '2025-03-05 10:00:00',
  lessonDuration: '1小时',
  lessonCourse: '英语',
  lessonType: '体验课',
})

function open(data: LessonInfo) {
  lessonInfo.value = data
  dialogRef.value.open()
}

const infos = computed(() => [
  {
    label: '学员姓名',
    value: lessonInfo.value.studentName,
  },
  {
    label: '上课时间',
    value: lessonInfo.value.lessonTime,
  },
  {
    label: '学习时长',
    value: lessonInfo.value.lessonDuration,
  },
  {
    label: '学习课程',
    value: lessonInfo.value.lessonCourse,
  },
  {
    label: '上课类型',
    value: lessonInfo.value.lessonType,
  },
])

const buttons = [{
  text: '返回',
  type: 'default',
  onClick: () => {
  },
}, {
  text: '开始上课',
  type: 'primary',
  onClick: () => {
    console.log('开始上课')
    emit('startLesson')
  },
}]

defineExpose({
  open,
})
</script>

<template>
  <view class="start-lesson-dialog">
    <Dialog ref="dialogRef" title="开始上课" :buttons="buttons">
      <template #content-title>
        <view class="title">
          请核对学员上课信息
        </view>
      </template>
      <view v-for="item in infos" :key="item.label" class="info-item">
        <text class="label">
          {{ item.label }}：
        </text>
        <text class="value">
          {{ item.value }}
        </text>
      </view>
    </Dialog>
  </view>
</template>

<style lang="scss" scoped>
.start-lesson-dialog {
  .title {
    font-size: 35rpx;
    text-align: center;
    width: 100%;
    margin-bottom: 20rpx;
  }
  .info-item {
    display: flex;
    align-items: center;
    line-height: 30rpx;
    color: #999;
    font-size: 32rpx;
    padding: 10rpx 0;
    // padding-left: 80rpx;
    .value{
        color:$primary-highlight-color;
    }
  }
}
</style>
